// 引入 react 依赖
import React, { Component, } from 'react';
import { connect, } from 'react-redux';
import { Text, View, Image, TouchableOpacity, TextInput, ImageBackground, ScrollView, Modal, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions, } from 'react-native-router-flux';
import { Tabs, Toast, List, InputItem, Portal, Checkbox } from '@ant-design/react-native';
import * as ActionTypes from '../../constants/constants.js';

// antd 按需加载

// 引入 处理数据 所需文件
import { smsLogin, smsSend, invitationLogin, checkPhone } from '../../module/module.js';

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, HomeIndicator, } from '../../components/index.js';

// 引入专用组件
import { } from './components';

// 引入工具包
import { loginBg, loginWx } from '../../util/images.js';
import { press, size, saveData, ScreenWidth, ScreenHeight, loadData, loadingApp, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js';

class PhoneLogin extends Component {

  constructor(props) {
    super(props);
    this.state = {
      send: '获取验证码',
      agreement: false

    };
  }

  componentDidMount() {

  }

  componentWillUnmount() {
    clearInterval(this.time);
  }

  smsSend() {
    const { disable, } = this.state;
    const { phone } = this;

    // 校验
    let phoneValue = phone._lastNativeText
    const isPhone = /^[1][0-9][0-9]{9}$/;
    if (!phone._lastNativeText) {
      Toast.info('请输入手机号', 1);
      return;
    }
    if (!isPhone.test(phone._lastNativeText)) {
      Toast.info('手机号不正确', 1);
      return;
    }

    checkPhone({
      phone: phoneValue,
    }, () => {

    }).then(res => {
      // 先禁用发送验证码按钮，防止二次点击
      console.log(res)
      Toast.fail('请先注册后再尝试登陆', 3)
    }).catch(error => {
      this.setState({
        disable: true,
      }, () => {
        if (disable) {
          return
        }
        this.loading = Toast.loading('发送验证码中', 0)
        // 发送验证码
        smsSend({
          phone: phoneValue,
        }).then(res => {
          Toast.success(res.message, 1)
          let send = 60;
          this.time = setInterval(() => {
            this.setState({
              send: `${send}s后重新获取`,
            });
            send--;
            if (send < 0) {
              clearInterval(this.time);
              this.setState({
                disable: false,
                send: '获取验证码',
              });
            }
          }, 1000);
        }).catch(error => {
          this.setState({
            disable: false,
          });
        }).finally(() => {
          Portal.remove(this.loading)
        })
      })
    })
  }


  smsLogin() {
    const { shopnum, user, qykType, EquityNo, } = this.props;
    const { phone, yzm } = this;
    const { agreement } = this.state
    console.log(agreement)
    if (!agreement) {
      Toast.info('请勾选《用户协议》《隐私条款》')
      return
    }
    const isMobile = /^[1][1,2,3,4,5,6,7,8,9,0][0-9]{9}$/;
    if (!phone._lastNativeText) {
      Toast.info('请输入手机号', 1);
      return;
    }
    if (!isMobile.test(phone._lastNativeText)) {
      Toast.info('手机号不正确', 1);
      return;
    }
    if (!yzm._lastNativeText) {
      Toast.info('请输入验证码', 1);
      return;
    }
    if (!yzm._lastNativeText) {
      Toast.info('请输入验证码', 1);
      return;
    }
    this.loading = Toast.loading('登录中', 0);
    smsLogin({
      phone: phone._lastNativeText,
      verificationCode: yzm._lastNativeText,
    }).then((res) => {
      console.log(res)
      loadingApp(this.loading)
    }).catch((error) => {
      Portal.remove(this.loading)
      Toast.info(error.message, 1);
    }).finally(() => {
      Portal.remove(this.loading)
    })

  }

  handlerUserTkQyk() {

  }

  render() {
    const { send } = this.state;
    return (
      <View style={Style.container}>
        <ImageBackground source={loginBg} style={{ flex: 1, width: ScreenWidth, height: ScreenHeight }}>
          <Status />
          <NavBar
            back={true}
            title="验证码登录"
            type="transparent"
          />
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{
              paddingHorizontal: 40,
              paddingVertical: 30
            }}
            >
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                borderBottomWidth: 1,
                borderBottomColor: '#ececee',
                marginBottom: 20
              }}
              >
                {/* C3DF7C */}
                <TextInput
                  ref={(r) => this.phone = r}
                  // autoFocus
                  keyboardType="numeric"
                  placeholder="请输入手机号"
                  placeholderTextColor="#DADADA"
                  style={{
                    flex: 1,
                    fontSize: 14,
                    paddingVertical: 14,
                    borderWidth: 0,
                    paddingHorizontal: 5,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                />
              </View>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                borderBottomWidth: 1,
                borderBottomColor: '#ececee',
                marginBottom: 20
              }}
              >
                <TextInput
                  ref={(r) => this.yzm = r}

                  placeholder="请输入验证码"
                  placeholderTextColor="#DADADA"
                  style={{
                    flex: 1,
                    fontSize: 14,
                    paddingVertical: 14,
                    borderWidth: 0,
                    paddingHorizontal: 5,
                    color: '#fff',
                  }}
                  underlineColorAndroid="transparent"
                />
                <TouchableOpacity
                  onPress={() => this.smsSend()}
                >
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>{send}</Text>
                </TouchableOpacity>
              </View>
              <TouchableOpacity
                activeOpacity={0.9}
                onPress={() => this.smsLogin()}
                style={{
                  marginTop: 15,
                  paddingVertical: 14,
                  paddingHorizontal: 20,
                  backgroundColor: '#fff',
                  borderRadius: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginBottom: 15,
                }}
              >
                <Text style={{ fontSize: size(28), color: '#000', lineHeight: size(30), }}>登录</Text>
              </TouchableOpacity>
              <View style={{
                marginTop: 10
              }}>
                {/* <Text style={{ fontSize: 14, color: '#DADADA', lineHeight: 16, }}>未注册手机验证后自动登录</Text> */}
                <View style={{
                  marginTop: 10,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}>
                  <TouchableOpacity
                    onPress={() => {
                      Actions.registered()
                    }}
                  >
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>新用户注册</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      Actions.login()
                    }}
                  >
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>密码登录</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={{
                padding: 15,
                alignItems: 'center',
                flexDirection: 'row',
                justifyContent: 'center',
              }}>
                <Checkbox
                  checked={this.state.agreement}
                  style={{ color: '#fff' }}
                  onChange={event => {
                    this.setState({ agreement: event.target.checked });
                  }}
                />
                <TouchableOpacity
                  onPress={() => {
                    Actions.privacyTerms()
                  }}
                >
                  <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>《用户协议》《隐私条款》</Text>
                </TouchableOpacity>
              </View>
              {/* <View style={{
                alignItems: 'center',
              }}>
                <View style={{
                  alignItems: 'center',
                  flexDirection: 'row',
                  justifyContent: 'center',
                  marginTop: 30,
                  marginBottom: 15
                }}>
                  <View style={{
                    flex: 1,
                    height: size(1),
                    backgroundColor: '#DADADA'
                  }} />
                  <Text style={{ fontSize: 14, color: '#DADADA', lineHeight: 16, marginHorizontal: 15 }}>或通过以下方式登录</Text>
                  <View style={{
                    flex: 1,
                    height: size(1),
                    backgroundColor: '#DADADA'
                  }} />
                </View>
                <View style={{
                  width: 44,
                  height: 44,
                  borderRadius: 22,
                  overflow: 'hidden',
                  backgroundColor: '#fff',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={loginWx} />
                </View>
              </View> */}
            </View>
          </View>
        </ImageBackground>
      </View >
    );
  }
}


export default connect(({ user, }) => ({
  user,
}))(pureRender(PhoneLogin));

